<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="keywords" content="首页" />
    <meta name="description" content="首页" />
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header"  th:content="${_csrf.headerName}"/>
    <meta name="viewport" content="width=device-width,viewport-fit=cover">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/swiper.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/public.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/index.css}">
    <link th:href="@{/shoppingApi/css/weui.min.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/jquery-weui.min.css}" rel="stylesheet">
    <style>
        .index {
            margin: 0 auto;
            right: 0;
            bottom: 0;
            left: 0;
        }
        .index .tabul {
            height: 100%;
            overflow: auto;
            margin-top: 0;
            padding-top: 91px;
        }
        .index .bannerimg {
            margin-top: 0;
        }
        .main_con {
            height: 100%;
        }
        .lingshouzhuanqu{
            display: inline-block;
            height: 45px;
            color: #f70029;
        }

    </style>

</head>
<body>
<div class="main index">
    <div class="main_con">
        <div class="top bgfff">
            <!--<div>-->
            <!--<button onclick="closeWin()">关闭窗口</button>-->
            <!--<button onclick="shareToMessage()">分享给朋友</button>-->
            <!--<button onclick="shartToTimeline()">分享到朋友圈</button>-->

            <!--<button onclick="shareToMessage2()">分享给朋友2</button>-->
            <!--<button onclick="shartToTimeline2()">分享到朋友圈2</button>-->
            <!--</div>-->

            <!--搜索框-->
            <div class="search flex flex-ac">
                <span class="rela">
                    <img class="w100  message" th:src="@{/shoppingApi/images/mess.png}">
                    <span class="abs num message-count"></span>
                </span>
                <div class="it1">
                    <a th:href="@{/wap/search}" class="flex flex-ac db">
                        <img th:src="@{/shoppingApi/images/search.png}">
                        <input class="it1" type="text" placeholder="请输入关键词">
                    </a>
                </div>
                <!--<span class="rela omit">-->
                <!--<img class="w100" th:src="@{/shoppingApi/images/omit.png}">-->
                <!--</span>-->
            </div>
            <!--导航栏-->
            <div class="banner pl15 pr15">
                <div class="swiper-container ftc ft14 c323232">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide active"><a href="/wap/productIndex" class="lingshouzhuanqu">零售专区</a></div>
                        <div class="swiper-slide"><a href="/wap/openDuiHuan?pageNum=1&sign=5" class="duihuan">兑换专区</a></div>
                        <div class="swiper-slide"><a href="/wap/openTiYan?pageNum=1&sign=3" class="tiyan">体验专区</a></div>
                        <div class="swiper-slide"><a href="/wap/openHuoDong?pageNum=1&sign=7" class="huodong">活动专区</a></div>
                    </div>
                </div>
            </div>
        </div>
        <!--导航分类1-->
        <div class="tabul">
            <div class="bannerimg">
                <div class="swiper-container ftc ft14 c323232 bold">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" th:if="${map!=null || pannerLists!=null}" th:each="panners:${map.pannerLists}">
                            <a th:href="@{'/wap/activity?productId=490'}">
                                <img class="w100" th:if="${ panners!=null || pannerUrl!=null  }" th:attr="src=@{${panners.pannerUrl}}" th:width="400px" th:height="160px">
                            </a>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <div class="line"></div>
            <!--爆品-->
            <div class="critical_brand rela bgfff">
                <div class="brand1 flex" >
                    <a th:if="${map!=null&&map.advList1!=null}" th:href="${'/wap/getDetails?productId='+map.advList1.productId}">

                        <img class="w100 adv-img" th:src="@{/shoppingApi/images/ycbp1.png}">
                    </a>
                    <a th:if="${map!=null&&map.advList2!=null}" th:href="${'/wap/getDetails?productId='+map.advList2.productId}">
                        <img class="w100 adv-img" th:src="@{/shoppingApi/images/ycbp2.png}">
                    </a>
                </div>
                <div class="brand2 flex">
                    <a th:if="${map!=null&&map.advList3!=null}" th:href="${'/wap/getDetails?productId='+map.advList3.productId}">

                        <img class="w100 adv-img" th:src="@{/shoppingApi/images/ycbp3.png}">
                    </a>
                    <a th:if="${map!=null&&map.advList4!=null}" th:href="${'/wap/getDetails?productId='+map.advList4.productId}">

                        <img class="w100 adv-img" th:src="@{/shoppingApi/images/ycbp4.png}">
                    </a>
                </div>
            </div>
            <div class="line"></div>
            <!--热门商品列表-->
            <div class="list c323232">
                <div class="lingshou  page-info">
                    <div class="goods bgfff" th:if="${map!=null && map.productGuigePriceList!=null}" th:each="productGuigePrice:${map.productGuigePriceList}">
                        <a class='db hot-area' href="#">
                            <img class="w100 hot-area" src="/1550462482806.png" height="266.66px">
                            <input type="hidden" name="productId" th:value="${productGuigePrice.productId}"/>
                        </a>
                        <div class="title rela">
                            <p class="ft15 prodesc" th:text="${productGuigePrice.productDesc}">传奇天路酒1瓶装</p>
                            <p class="nft10 c969696 mt5 mb5">商品已售出1352件</p>
                            <p class="">
                                <span class="ft15">优惠后最低：</span><span class=ft12 cf70029>￥</span><span class="ft17 cf70029" th:text="${#numbers.formatDecimal(productGuigePrice.minYHPrice,1,2)}" >260.00 </span>
                            </p>
                            <div class="share abs ftc ">
                                <p class="ft12">分享赚</p>
                                <p class="nft10">赚￥<label class="154" th:text="${#numbers.formatDecimal(productGuigePrice.fenxiangZhuan,1,2)}">5.00</label></p>
                            </div>
                        </div>
                        <div class="line"></div>
                    </div>
                </div>
            </div>

            <!--零售专区 滑动分页-->
            <!--<div class="weui-loadmore  weui-loadmore1">-->
            <!--<i class="weui-loading  weui-loading1"></i>-->
            <!--<span class="weui-loadmore__tips  weui-loadmore__tips1">正在加载</span>-->
            <!--<input type="hidden" class="pageNum" name="pageNum" value="0">-->
            <!--</div>-->
        </div>
        <!--导航分类2  -->

        <span class="back-top"></span>
        <div class="fixedBox50">
            <ul class="fixed-bottom bottom flex flex-pc ftc bgfff nft10 c323232">
                <li class="it1 active">
                    <a class="db" >
                        <span class="img"></span>
                        <span>首页</span>
                    </a>
                </li>
                <li class="it1">
                    <a th:href="@{/wap/selectProductYJAndRjClassfy}" class="db">
                        <span class="img"></span>
                        <span>分类</span>
                    </a>
                </li>
                <li class="it1">
                    <a th:href="@{/wap/getCartList}"class="db">
                        <span class="img"></span>
                        <span>购物车</span>
                    </a>
                </li>
                <li class="it1">
                    <a th:href="@{/wap/openUserCenter}" class="db">
                        <span class="img"></span>
                        <span>我的</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--分享弹窗-->
<div id="sharePopup" class="weui-popup__container popup-bottom">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal share-layer">
        <p class="ft17 cff0000 mb10 mt10 text-center">赚<label class="share-fenXiangZhuan">3.45</label></p>
        <p class="ft14 c323232 pl15 pr15">1.只要你的好友通过你的链接购买此商品，你就能赚到至少<span class="cf70029  share-fenXiangZhuan">3.45</span>元利润（可提现哦）</p>
        <p class="flex mt20 mb20 flex-ac pl15 pr15">
            <span class="ml20 mr20 it1 lineh1"></span>
            <span class="ft14 c323232">分享到</span>
            <span class="ml20 mr20 it1 lineh1"></span>
        </p>
        <ul class="overflow ft14 c323232 ftc">
            <li id="shareMessage">
                <img class="wxhaoyou" th:src="@{/shoppingApi/images/share1.png}">
                <p class="mt10 ">微信好友</p>
            </li>
            <li id="shareTimeline">
                <img th:src="@{/shoppingApi/images/share2.png}">
                <p class="mt10">朋友圈</p>
            </li>
            <li id="shareImg">
                <img th:src="@{/shoppingApi/images/share4.png}">
                <p class="mt10">生成分享图</p>
            </li>
        </ul>
        <img class="close close-popup" th:src="@{/shoppingApi/images/close3.png}">
    </div>
</div>
<!--生成二维码-->
<div id="imageLayer" class="weui-gallery" style="background:rgba(0,0,0,0.8);">
    <img style="position:absolute;top:15%;left:15%;width:70%;" alt="">
    <div class="weui-gallery__opr" id="saveImage">长按图片保存</div>
</div>
</body>
<script th:src="@{/shoppingApi/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/shoppingApi/js/common.js}"></script>
<script th:src="@{/shoppingApi/js/swiper.min.js}"></script>
<!--<script th:src="@{/shoppingApi/js/jweixin-1.0.0.js}"></script>-->
<!--<script th:src="@{/shoppingApi/js/jweixin-1.4.0.js}"></script>-->
<script th:src="@{/shoppingApi/js/jquery-weui.min.js}"></script>
<!--<script type="text/javascript" th:src="@{/shoppingApi/js/H5Plus/common.js}"></script>-->
<script type="text/javascript" th:src="@{/shoppingApi/js/plusShare.js}"></script>
<script>
    /*
    $(function () {
        var url = location.href.split('#')[0];
        $.ajax({
            url: '/wap/indexShare?url=' + url,
            success: function (result) {
                console.log(result.wx);
                var data = result.wx;
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: 'wx0ccd55ff5b6e2b12', // 必填，公众号的唯一标识
                    timestamp: data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.noncestr, // 必填，生成签名的随机串
                    signature: data.signature,// 必填，签名
                    jsApiList: [
                        'onMenuShareAppMessage',
                        'onMenuShareTimeline',
                        'chooseWXPay',
                        'showOptionMenu',
                        'updateAppMessageShareData',
                        'updateTimelineShareData',
                        'hideMenuItems',
                        'showMenuItems',
                        'closeWindow'
                    ] // 必填，需要使用的JS接口列表
                });
            }
        })

        wx.ready(function () {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            // shareToMessage();
            // shartToTimeline();
        });
        wx.error(function (res) {
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            console.log('设置失败');
        });
    });

    function shareToMessage () {
        wx.onMenuShareAppMessage({
            title: '商品1', // 分享标题
            desc: '商品1描述', // 分享描述
            link: 'http://www.ycsqd.com/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://www.ycsqd.com/imgs/uploads/kfy01.png', // 分享图标
            success: function () {
                // 设置成功
                alert('设置分享好友内容成功');
            }
        });
    }
    function shartToTimeline () {
        wx.onMenuShareTimeline({
            title: 'product', // 分享标题
            link: 'http://www.ycsqd.com/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://www.ycsqd.com/imgs/uploads/kfy01.png', // 分享图标
            success: function () {
                // 设置成功
                alert('设置朋友圈内容成功');
            }
        });
    }
    function shareToMessage2 () {
        wx.updateAppMessageShareData({
            title: '商品1', // 分享标题
            desc: '商品1描述', // 分享描述
            link: 'http://www.ycsqd.com/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://www.ycsqd.com/imgs/uploads/kfy01.png', // 分享图标
            success: function () {
                // 设置成功
                alert('设置分享好友内容成功');
            }
        });
    }
    function shartToTimeline2 () {
        wx.updateTimelineShareData({
            title: 'product', // 分享标题
            link: 'http://www.ycsqd.com/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://www.ycsqd.com/imgs/uploads/kfy01.png', // 分享图标
            success: function () {
                // 设置成功
                alert('设置朋友圈内容成功');
            }
        });
    }
    function closeWin () {
        wx.closeWindow({});
    }
    */

    // 隐藏微信自带底部导航
    // document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
    //     WeixinJSBridge.call('hideToolbar');
    //     alert(12)
    // });

    // $(function () {
    //
    //     /*加载零售专区的数据*/
    //     var pageNum=0;
    //     var sign=4;
    //     $.ajax({
    //         type:'post',
    //         url:'/wap/getProductIndex',
    //         data:{
    //             'pageNum':pageNum,
    //             'sign':sign
    //         },
    //         success:function (result) {
    //             getProductHotData(result.priceDataList);
    //         },
    //         beforeSend : function(xhr) {
    //             xhr.setRequestHeader(header, token);
    //         }
    //     })
    //
    //
    //     /*调用滚动加载*/
    //     infinite();
    //
    //     /*weui滚动加载*/
    //     var str="";
    //     var loading = false;  //状态标记
    //     var pageNum=parseInt($('.pageNum').val());
    //     function infinite() {
    //         $('.tabul').infinite(100).on("infinite", function () {
    //             if (loading) return;
    //             loading = true;
    //             pageNum=pageNum+1;
    //
    //             $.ajax({
    //                 type:'post',
    //                 url:'/wap/getProductIndex',
    //                 data:{
    //                     'pageNum':pageNum,
    //                     'sign':sign
    //                 },
    //                 success:function (result) {
    //                     if(result.proPriceList==null){
    //                         loading=true;
    //                         $('.tabul').destroyInfinite();
    //                         $('.weui-loadmore1').hide();
    //                         $('.lingshou ').append("<p style='font-size: 12px;text-align: center'>没有更多了</p>");
    //                     }else{
    //                         getProductHotData(result.proPriceList);
    //                         loading=false;
    //                         // $('.tabul').destroyInfinite();
    //                         $('.pageNum').val(pageNum);
    //                         $('.weui-loadmore1').hide();
    //                     }
    //                 },
    //                 beforeSend : function(xhr) {
    //                     xhr.setRequestHeader(header, token);
    //                 }
    //             })
    //
    //             // loading = false;
    //             //模拟延迟
    //         });
    //     }
    //
    //     function getProductHotData(productHotData) {
    //         $.each(productHotData,function (i,item) {
    //             str='<div class="goods bgfff"  >' +
    //                 "                        <a class='db hot-area' href=\"#\" style=\"background-image: url("+item.proImg+")\">\n" +
    //                 // "                            <img class=\"w100 hot-area\"  src='"+item.proImg+" ' height=\"266.66px\">\n" +
    //                 "                            <input type=\"hidden\"  name=\"productId\" value='"+item.productId+"'\"/>\n" +
    //                 "                        </a>\n" +
    //                 "                        <div class=\"title rela\">\n" +
    //                 "                            <p class=\"ft15 prodesc\" >"+item.productDesc+ "</p>\n" +
    //                 "                            <p class=\"nft10 c969696 mt5 mb5\">商品已售出1352件</p>\n" +
    //                 "                            <p class=\"\">\n" +
    //                 "                                <span class=\"ft15\">优惠后最低：</span><span class=\"ft12 cf70029\">￥</span><span class=\"ft17 cf70029\">"+item.minYHPrice.toFixed(2)+" </span>\n" +
    //                 "                            </p>\n" +
    //                 "                            <div class=\"share abs ftc\" onclick=\"shareAndEarn(\'"+item.productId+"\')\">\n" +
    //                 "                                <p class=\"ft12\">分享赚</p>\n" +
    //                 "                                <p class=\"nft10\">赚￥<label class=\'"+item.productId+"\'>"+item.fenXiangZhuan.toFixed(2)+"</label></p>\n" +
    //                 "                            </div>\n" +
    //                 "                        </div>\n" +
    //                 "                        <div class=\"line\"></div>\n" +
    //                 "                    </div>"
    //             $(".lingshou").append(str);
    //         })
    //
    //     }
    //
    //     /*回到顶部*/
    //     $(".back-top").on('click',function () {
    //         $(".tabul").animate({
    //             scrollTop: 0
    //         }, 500)
    //     })
    //     var mySwiper = new Swiper('.banner .swiper-container', {
    //         slidesPerView : 4,
    //         spaceBetween : 30,
    //         observer:true,
    //         observeParents:true,
    //         on:{
    //             click: function(){
    //                 var clickedIndex= this.clickedIndex;
    //                 this.slideTo(clickedIndex, 1000, true);
    //                 if(!$(".banner .swiper-slide").eq(clickedIndex).hasClass('active')){
    //                     $(".banner .swiper-slide").eq(clickedIndex).siblings().removeClass('active');
    //                     $(".banner .swiper-slide").eq(clickedIndex).addClass('active');
    //                     $(".main_con .tabul").eq(clickedIndex).siblings(".tabul").addClass("hide");
    //                     $(".main_con .tabul").eq(clickedIndex).removeClass("hide");
    //                 }
    //             }
    //         }
    //     })
    //     var mySwiperimg = new Swiper('.bannerimg .swiper-container', {
    //         slidesPerView : 1,
    //         observer:true,
    //         observeParents:true,
    //         pagination: {
    //             el: '.swiper-pagination',
    //         },
    //     })
    //     //首页消息显示条数
    //     $(function () {
    //         $.ajax({
    //             url:'/wap/getAllMessages',
    //             success:function (result) {
    //                 // console.log(result);
    //                 $('.message-count').html(result.allMessageSize);
    //                 if(result.allMessageSize==0){
    //                     $('.message-count').hide();
    //                 }
    //             }
    //         })
    //     })
    //
    //     /*进入消息页面*/
    //     $('.message').on('click',function () {
    //         window.location.href="/wap/getSysMessage";
    //     })
    //
    //     /*热卖区商品图片点击*/
    //     $('.lingshou').on('click', '.hot-area', function () {
    //         var productId=$(this).find('input').val();
    //         window.location.href='/wap/getDetails?productId='+productId
    //         return false;
    //     })
    //
    //
    //     /*零售专区*/
    //     $('.lingshou').on('click','.w100',function () {
    //         var productId=$(this).siblings().val();
    //         // var sign=4;
    //         window.location.href="/wap/getDetails?productId="+productId;
    //     })
    //
    //
    // });


    // 分享赚
    var proId = '';
    $.toast.prototype.defaults.duration = 1000;
    $(function () {
        if(navigator.userAgent.indexOf("Html5Plus") > -1){
            $('#saveImage').text('保存到手机相册');
        }
        // 分享朋友按钮
        $('#shareMessage').on('click', function () {
            if(navigator.userAgent.indexOf("Html5Plus") > -1){
                // downloadEl.style.display = "none";//隐藏下载banner
                //分享内容，开发者可自定义
                var message = {
                    title: "plusShare示例", //应用名字
                    content: "plusShare基于HTML5+的share模块，开发者只需调用一个API，即可调起微信好友、微信朋友圈、系统更多分享功能",
                    href: "http://www.dcloud.io/hellomui", //分享出去后，点击跳转地址
                    thumbs: ["http://img-cdn-qiniu.dcloud.net.cn/icon3.png"] //分享缩略图
                }
                //调起分享
                shareMessage(message, function(res) {
                    //分享回调函数
                    if(res) {
                        plus.nativeUI.toast("分享成功");
                    } else {
                        plus.nativeUI.toast("分享失败");
                    }
                })

            } else {
                $.toast('请生成分享图', 'forbidden');
            }
        });
        // 分享朋友圈按钮
        $('#shareTimeline').on('click', function () {
            if(navigator.userAgent.indexOf("Html5Plus") > -1){
                // downloadEl.style.display = "none";//隐藏下载banner
                //分享内容，开发者可自定义
                var message = {
                    title: "plusShare示例", //应用名字
                    content: "plusShare基于HTML5+的share模块，开发者只需调用一个API，即可调起微信好友、微信朋友圈、系统更多分享功能",
                    href: "http://www.dcloud.io/hellomui", //分享出去后，点击跳转地址
                    thumbs: ["http://img-cdn-qiniu.dcloud.net.cn/icon3.png"] //分享缩略图
                }
                //调起分享
                shareTimeline(message, function(res) {
                    //分享回调函数
                    if(res) {
                        plus.nativeUI.toast("分享成功");
                    } else {
                        plus.nativeUI.toast("分享失败");
                    }
                })

            } else {
                $.toast('请生成分享图', 'forbidden');
            }
        });
        // 生成二位码按钮
        $('#shareImg').on('click', qrImg);
        // 保存图片后关闭浮层
        $('#saveImage').on('click', function (e) {
            plus.gallery.save( "http://www.ycsqd.com/imgs/uploads/file_170815170321.JPG", function () {
                plus.nativeUI.toast("保存成功");
            } );
            $('#imageLayer').hide();
        });
        // 点击遮罩关闭浮层
        $('#imageLayer').on('click', function (e) {
            var target =  $(e.target);
            if (target.is('#imageLayer')) {
                target.hide();
            }
        });

        // 双击返回按钮退出应用
        var first = null;
        mui.back = function() {
            //首次按键，提示‘再按一次退出应用’
            if (!first) {
                first = new Date().getTime();
                mui.toast('再按一次退出应用');
                setTimeout(function() {
                    first = null;
                }, 1000);
            } else {
                if (new Date().getTime() - first < 1000) {
                    plus.runtime.quit();
                }
            }

        };
    });
    // 打开分享操作面板
    function shareAndEarn (id) {
        proId = id;
        $('.share-fenXiangZhuan').html($('.' + id).html());

        $('#sharePopup').popup();
    }
    // 生成分享图片
    function qrImg () {
        $.showLoading('图片生成中');

        $.ajax({
            type: 'get',
            url: '/wap/getEnCode?productId='+proId,
            success: function (res) {
                if (res.ewmURL) {
                    console.log(res.ewmURL)
                    console.log(typeof (res.ewmURL));
                    // console.log(JSON.stringify(res.ewmURL))
                    $.hideLoading();
                    // 图片生成成功，打开浮层，关闭分享弹窗
                    imageLayer(res.ewmURL);
                    $.closePopup();
                }
            },
            error: function (err) {
                $.toast('图片生成失败', 'cancel');
                $.hideLoading();
            }
        });
    }
    // 图片浮层
    function imageLayer (img) {
        var layout = $('#imageLayer');
        layout.find('img').attr('src', img);
        layout.show();
    }

    $(function () {
        $.ajax({
            url:'/wap/createEWMImg',
            success:function (res) {
                console.log("ok");
            }
        })
    })

</script>
</html>
